<template>
    <el-calendar>
      <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
      <template slot="dateCell" slot-scope="{ date, data }" @click="TodoToday(true)">
        <p class="ppp" :todolist="addTodoToday(data.day.split('-').slice(2).join('-'))">
          {{ data.day.split('-').slice(2).join('-') }}
        </p>
      </template>
    </el-calendar>
  </template>
  
  <script>
  import { todoListApi } from "@/api/timeApi";
  
  export default {
    props: ['dialogVisible', 'setDialogVisible'],
    data() {
      return {
        item: [],
        data: '',
        isFirstTime: false
      };
    },
    mounted() {
  
      // this.addTodoToday()
    },
    methods: {
      async addTodoToday(ids) {
        this.setDialogVisible(false);
        let id = ids;
  
        if (20<id<26) {
            console.log(id);
          let ret = await todoListApi(id);
          if (ret.code === 0) {
            console.log(ret.data);
            // this.item = ret.data
            // var child = document.querySelectorAll('ppp')
            // var parent = child.parentNode
            // var chid = document.createElement('div')
            // var todo = this.item.map(item => {
            //     return item.title + ":" + item.textarea
            // })
            // chid.textContent = todo
            // console.log(parent);
            // parent.append(chid)
            // child.className = 'todo'
   

          } else {
            this.$message({
              message: '还未添加待办事件',
              type: 'success',
              showClose: true, //手动关闭
              duration: 3000,
            });
          }
        }else{
            return
        }
      },
      TodoToday(value) {
        this.setDialogVisible(value);
      }
    },
  };
  </script>
  
  <style lang="stylus">
  .todo {
    background-color: skyblue;
    color: rgba(240, 82, 10, 0.637);
    font-size: 16px;
  }
  </style>